<template>
    <header class="header">
        <div class="header-content">
            <!-- Logo和导航 -->
            <div class="left">
                <div class="logo" @click="handleHomeClick">
                    <img src="/images/logo.svg" alt="Logo">
                    <span class="site-name">技术社区</span>
                </div>
                <nav class="nav-links">
                    <el-button text @click="handleHomeClick">博客</el-button>
                    <el-button text @click="router.push('/tags')">工具</el-button>
                    <el-button text @click="router.push('/wiki')">知识库</el-button>
                </nav>
            </div>

            <!-- 搜索框 -->
            <div class="center">
                <el-input
                    placeholder="搜索文章..."
                    :prefix-icon="Search"
                    class="search-input"
                >
                    <template #append>
                        <el-button :icon="Search">搜索</el-button>
                    </template>
                </el-input>
            </div>

            <!-- 已登录状态 -->
            <div class="right">
                <template v-if="!userStore.isLoggedIn">
                    <el-button 
                        text 
                        class="login-btn"
                        @click="router.push('/login')"
                    >
                        登录/注册
                    </el-button>
                </template>

                <template v-else>
                    <el-dropdown trigger="click">
                        <div class="user-avatar">
                            <el-avatar 
                                :size="32" 
                                :src="userStore.currentUser?.avatar"
                                v-if="userStore.currentUser?.avatar"
                            />
                            <el-avatar 
                                :size="32" 
                                v-else
                                :style="{ 
                                    backgroundColor: generateColor(userStore.currentUser?.username),
                                    color: '#fff'
                                }"
                            >
                                {{ userStore.currentUser?.username.charAt(0).toUpperCase() }}
                            </el-avatar>
                        </div>
                        
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="router.push(`/user/${userStore.currentUser.id}`)">
                                    <el-icon><User /></el-icon>
                                    个人主页
                                </el-dropdown-item>
                                <el-dropdown-item @click="router.push('/settings')">
                                    <el-icon><Setting /></el-icon>
                                    设置
                                </el-dropdown-item>
                                <el-dropdown-item divided @click="handleLogout">
                                    退出登录
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </template>
            </div>
        </div>
    </header>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { Search, Edit, User, Setting } from '@element-plus/icons-vue'
import { generateColor } from '../utils/avatar'

const router = useRouter()
const userStore = useUserStore()

// 退出登录
const handleLogout = () => {
    userStore.logout()
    router.push('/')
}

// 修改首页点击处理
const handleHomeClick = () => {
    router.push('/')
    // 如果当前已经在首页，则刷新文章列表
    if (window.handleHomeClick && router.currentRoute.value.path === '/') {
        window.handleHomeClick()
    }
}
</script>

<style lang="scss" scoped>
.header {
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    
    .header-content {
        max-width: 1200px;
        height: 100%;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .left {
            display: flex;
            align-items: center;
            gap: 40px;
            
            .logo {
                display: flex;
                align-items: center;
                gap: 8px;
                cursor: pointer;
                
                img {
                    height: 32px;
                    width: 32px;
                }
                
                .site-name {
                    font-size: 18px;
                    font-weight: 600;
                    color: #1a1a1a;
                }
            }
            
            .nav-links {
                display: flex;
                gap: 24px;
                
                .el-button {
                    font-size: 15px;
                }
            }
        }
        
        .center {
            flex: 1;
            max-width: 460px;
            margin: 0 40px;
            
            .search-input {
                width: 100%;
                
                :deep(.el-input__wrapper) {
                    border-radius: 4px;
                }
            }
        }
        
        .right {
            display: flex;
            align-items: center;
            gap: 16px;
            
            .user-avatar {
                cursor: pointer;
                transition: transform 0.2s;
                
                &:hover {
                    transform: translateY(-2px);
                }
            }
            
            .login-btn {
                font-size: 14px;
                color: #606266;
                
                &:hover {
                    color: #409EFF;
                }
            }
            
            .register-btn {
                font-size: 14px;
                padding: 8px 16px;
                border-radius: 4px;
            }
        }
    }
}

// 响应式处理
@media screen and (max-width: 1200px) {
    .header-content {
        padding: 0 16px;
        
        .center {
            max-width: 320px;
            margin: 0 20px;
        }
    }
}

@media screen and (max-width: 768px) {
    .header {
        .header-content {
            .left {
                .nav-links {
                    display: none;
                }
            }
            
            .center {
                display: none;
            }
        }
    }
}
</style> 